<template>
    <div>
        <span>
            <van-nav-bar
                    title="我的收藏" @click-right="updateSpu" @click-left="goToPersonal" left-arrow
                    :right-text="currentRightText"
            />
        </span>
        <van-dropdown-menu>
            <span>
                <van-dropdown-item @change="menuChange" v-model="value1" :options="kindsOption"/>
            </span>
        </van-dropdown-menu>
        <van-empty v-show="collectSpuList.length == 0" description="没有收藏哦"/>
        <div v-for="(col,index) in collectSpuList">
            <van-divider v-show="index != 0"/>
            <van-cell>
                <van-checkbox ref="checkbox" v-model="spuCheckList[index].checked" :key="col.spuId" v-show="checkShow"
                              :name="col.spuName"
                              @change="onChange(col.spuId)" checked-color="#07c160"
                              style="display: block;float: left;position: relative;top: 50px;"></van-checkbox>
                <van-card
                        :price="col.spuMoney"
                        :title="col.spuName"
                        :thumb="col.masterImg"
                        style="display:block;float: left;width:320px">
                </van-card>
            </van-cell>

        </div>
        <van-submit-bar v-show="currentRightText == '完成'" button-text="取消收藏" @submit="onSubmit">
            <van-checkbox v-model="checked" style="margin-right: 250px" checked-color="#07c160" @click="checkAll">全选
            </van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script>
    export default {
        name: "MyCollect",
        data() {
            return {
                checked: false,
                kindsOption: [{text: "全部类型", value: "-1"}],
                result: '',
                selectList: '',
                value1: "-1",
                collectSpuList: [],
                updateShow: true,
                finishShow: false,
                checkShow: false,
                currentRightText: "编辑",
                spuCheckList: []
            }
        },
        created() {
            this.getCollectSpu(-1);
            this.getKinds();
        },
        methods: {
            onChange(spuId) {
                console.log(this.selectList);
            },
            /*全选*/
            checkAll() {
                if (this.checked == false) {
                    for (let i = 0; i < this.spuCheckList.length; i++) {
                        this.spuCheckList[i].checked = false
                    }
                } else {
                    for (let i = 0; i < this.spuCheckList.length; i++) {
                        this.spuCheckList[i].checked = true
                    }
                }

            },
            /*获取所有的商品类型*/
            getKinds() {
                this.$axios({
                    method: "get",
                    url: "http://localhost:8101/kinds/findAll"
                }).then(result => {
                    console.log(result);
                    for (let i = 0; i < result.data.length; i++) {
                        let obj = new Object();
                        obj.text = result.data[i].kindsName;
                        obj.value = result.data[i].kindsId;
                        this.kindsOption.push(obj);
                    }
                    console.log(this.kindsOption)
                })
            },
            /*编辑*/
            updateSpu() {
                if (this.currentRightText == "编辑") {
                    this.updateShow = false;
                    this.checkShow = true;
                    this.finishShow = true;
                    this.currentRightText = "完成";
                } else if (this.currentRightText == "完成") {
                    this.finishSpu();
                    this.currentRightText = "编辑";
                }
            },
            /*完成*/
            finishSpu() {
                this.updateShow = true;
                this.checkShow = false;
                this.finishShow = false;
            },
            /*获取用户收藏*/
            getCollectSpu(kindsId) {
                this.$axios({
                    method: "get",
                    url: "http://localhost:8101/spu/getCollectSpu/",
                    params: {
                        userId: 1,
                        spuTypeId: kindsId
                    }
                }).then(result => {
                    console.log(result);
                    this.spuCheckList = [];
                    this.collectSpuList = result.data;
                    for (let i = 0; i < this.collectSpuList.length; i++) {
                        let obj = new Object();
                        obj.collectId = this.collectSpuList[i].collectId;
                        obj.checked = false;
                        this.spuCheckList.push(obj);
                    }
                })
            }, goToPersonal() {
                this.$router.push({path: '/infor'});
            }, onSubmit() {
                this.$axios({
                    method: "post",
                    url: "http://127.0.0.1:8101/spu/removeCollectSpu",
                    data: {
                        list: this.spuCheckList
                    }
                }).then(response => {
                    console.log(response)
                })
            }, menuChange() {
                console.log(this.value1)
                this.getCollectSpu(this.value1);
            }
        }
    }
</script>

<style scoped>
    custom-class {
        width: 300px;
        border: 1px solid red;
    }

    .van-card {
        background-color: #fafafa00;
    }
</style>
